<template>
  <div class="patients-list">
    <div class="patients-list-header">
      <h2 @click="scene = 0">
        就诊人员
        <img src="/src/assets/GoBack.png" alt="icon" class="go-back"  v-if="scene === 1">
      </h2>
      <el-button icon="User" type="primary" @click="handleAddUser">新增就诊人员</el-button>
    </div>

    <!-- 就诊人管理模块:有数据展示就诊人信息的结构 -->
    <div v-if="scene === 0" class="patients-list-body">
      <VisitorList
          v-for="(user, index) in patients"
          :key="user.id"
          :index="index"
          :user="user"
          class="user-info"
          @change-scene="changeScene"
          @remove-user="removeUser"
      />
    </div>

    <!-- 添加就诊人|修改已有的就诊人信息的结构 -->
    <div v-if="scene === 1" class="patients-update">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form label-position="left" label-width="80px" style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名:">
          <el-input v-model="userParams.name" placeholder="请你输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="证件类型:">
          <el-select
              v-model="userParams.certificatesType"
              placeholder="请你选择证件的类型"
              style="width: 100%"
          >
            <el-option
                v-for="item in certificationArr"
                :key="item.id"
                :label="item.name"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码:">
          <el-input
              v-model="userParams.certificatesNo"
              placeholder="请你输入证件号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户性别:">
          <el-radio-group v-model="userParams.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期:">
          <el-date-picker
              v-model="userParams.birthdate"
              placeholder="请你选择日期"
              type="date"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input
              v-model="userParams.phone"
              placeholder="请你输入用户手机号码"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-divider content-position="left">建档信息（完善后部分医院首次就诊不排队建档）</el-divider>
      <el-form label-position="left" label-width="80px" style="width: 60%; margin: 10px auto">
        <el-form-item label="婚姻状况:">
          <el-radio-group v-model="userParams.isMarry">
            <el-radio :label="1">已婚</el-radio>
            <el-radio :label="0">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保:">
          <el-radio-group v-model="userParams.isInsure">
            <el-radio :label="1">自费</el-radio>
            <el-radio :label="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址:">
          <el-cascader v-model="userParams.addressSelected" :props="props" width="200px"/>
        </el-form-item>
        <el-form-item label="详细地址:">
          <el-input
              v-model="userParams.address"
              placeholder="请你输入用户详细地址"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-divider content-position="left">紧急联系人信息（选填）</el-divider>
      <el-form label-position="left" label-width="80px" style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名:">
          <el-input
              v-model="userParams.contactsName"
              placeholder="请你输入紧急联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型:">
          <el-select
              v-model="userParams.contactsCertificatesType"
              placeholder="请你选择证件的类型"
              style="width: 100%"
          >
            <el-option
                v-for="item in certificationArr"
                :key="item.id"
                :label="item.name"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码:">
          <el-input
              v-model="userParams.contactsCertificatesNo"
              placeholder="请你输入证件号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码:">
          <el-input
              v-model="userParams.contactsPhone"
              placeholder="请你输入用户手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="Promotion" type="primary" @click="submit">提交</el-button>
          <el-button icon="Refresh" type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>

<script setup>
import {ref, reactive, onMounted, watch} from 'vue'
import {useRoute, useRouter} from "vue-router";
import {reqAllUser, reqCertationType, reqCity, reqAddOrUpdateUser} from '@/api/user'
import {ElMessage} from "element-plus";


const route = useRoute()
const router = useRouter()

// 定义响应式数据：就诊人员信息
const patients = ref([])
const certificationArr = ref([])
//收集新增就诊人的数据
const userParams = reactive({
  name: "",
  certificatesType: "",
  certificatesNo: "",
  sex: "",
  birthdate: "",
  phone: "",
  isMarry: 0,
  isInsure: 0,
  addressSelected: [],
  address: "",
  contactsName: "",
  contactsCertificatesType: "",
  contactsCertificatesNo: "",
  contactsPhone: "",
})

// 请求所有就诊人员信息
onMounted(() => {
  getAllUser();
  getCertificationType();
  //判断:当前这个路由组件是不是从挂号组件而来[挂号组件而来,路径上是携带query参数type=add]
  if (route.query.type === "add") {
    scene.value = 1
  }
  if (route.query.type === "edit") {
    scene.value = 1
  }
})

// 获取所有就诊人员信息
const getAllUser = async () => {
  const res = await reqAllUser()
  if (res.code === 200) {
    patients.value = res.data
  }
}

// 获取证件的类型的数据
const getCertificationType = async () => {
  const res = await reqCertationType()
  if (res.code === 200) {
    certificationArr.value = res.data
  }
}

// 定义响应式数据：决定卡片的展示形式
const scene = ref(0)
// 按钮新增就诊人员切换场景
const handleAddUser = () => {
  reset() // 清空上次数据
  scene.value = 1
}

// 修改已有的就诊人员信息
const changeScene = (user) => {
  scene.value = 1
// 将用户信息赋值给userParams
  Object.assign(userParams, user)
}

//子组件自定义事件:删除按钮触发
const removeUser = ()=>{
  //再次获取全部的就诊人的信息
  getAllUser();
}
// 地址级联选择器数据
const props = {
  lazy: true,
  // 加载级联选择器数据
  async lazyLoad(node, resolve) {
    const res = await reqCity(node.data.id || "86")
    // 整理数据
    const data = res.data.map(item => {
      return {
        id: item.id,
        value: item.value,
        label: item.name,
        leaf: !item.hasChildren // 是否是叶子节点
      }
    })
    // 返回组件需要的数据
    resolve(data)
  }
}

// 提交新增就诊人
const submit = async () => {
//  1:新增就诊人；2:修改就诊人信息//要么新增用户成功|更新已有的用户成功
  try {
    await reqAddOrUpdateUser(userParams)
    ElMessage.success(userParams.id ? "修改信息成功！" : "新增就诊人成功！")
    //提交按钮的时候判断是不是从预约挂号而来
    if (route.query.type) {
      router.back();
    } else {
      scene.value = 0;
    }
    await getAllUser()
  } catch (error) {
    ElMessage.error(userParams.id ? "修改信息成功！" : "新增就诊人成功！")
  }
}

// 重置表单
const reset = () => {
  Object.assign(userParams, {
    id: null,
    name: "",
    certificatesType: "",
    certificatesNo: "",
    sex: "",
    birthdate: "",
    phone: "",
    isMarry: "",
    isInsure: "",
    addressSelected: [],
    address: "",
    contactsName: "",
    contactsCertificatesType: "",
    contactsCertificatesNo: "",
    contactsPhone: "",
  })
}


//监听全部就诊人的数据
watch(
    () => patients.value,
    () => {
      if (route.query.type === "edit") {
        //从编辑页面跳转过来,将当前用户信息赋值给userParams
        const user = patients.value.find(item => item.id === Number(route.query.id))
        if (user) {
          Object.assign(userParams, user)
          scene.value = 1
        }
      }
    }
);

</script>

<style lang="scss" scoped>
.patients-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

  .patients-list-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    color: #282727;
    padding: 0 20px;
    background-color: #f1f1f1;

    h2 {
      cursor: pointer;

      &:hover {
        color: #409eff;
      }

      .go-back {
        width: 20px;
      }
    }



    .el-button {
      width: 150px;
      font-size: 18px;

      &:hover {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }

  .patients-list-body {
    width: 100%;
    height: 100%;
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;

    .user-info {
      width: 31%;
      margin: 10px;
    }
  }

  .patients-update {
    //width: 100%;
    height: 100%;
    border: 1px solid #e2e2e2;
    padding: 20px;
  }
}

</style>